<template>
    <div>
        <h1>这是App组件</h1>
        <!-- 为什么这里叫做mt-button，并且直接就能用 -->
        <mt-button type="default" @click="show">default</mt-button>
        <mt-button type="danger">danger</mt-button>
        <mt-button size="small">small</mt-button>
        <mt-button size="normal">normal</mt-button>
        <mt-button plain>plain</mt-button>
        <mt-button icon="back">back</mt-button>
        <mt-button icon="more">更多</mt-button>

        <button type="button" class="mui-btn mui-btn-royal">
					紫色
				</button>
        <router-link to="/account">Account</router-link>
        <router-link to="/goodslist">Goodslist</router-link>
        <router-view></router-view>
    </div>
</template>

<script>
// 按需导入Toast组件
import { Toast } from 'mint-ui';

    export default {
        data(){
            return {
                toastInstanse: ''
            }
        },
        created() {
            this.getList()
        },
        methods: {
            getList(){ // 模拟获取列表的一个Ajax方法，在获取数据之前，立即弹出Toast提示用户
                this.show();
                setTimeout(()=>{
                    // 3秒后，移除
                    this.toastInstanse.close()
                },3000)
            },
            show() {
                    this.toastInstanse = Toast({
                    message: '正在获取',
                    duration: -1,
                    position: 'top',
                    iconClass: 'glyphicon glyphicon-ok',
                    className: 'myToast' // 自定义Toast的样式，需要自己提供一个类名
                })
            }
        }
    }
</script>

<style>

</style>